<template>
  <div class="MyProgress w-100% flex items-center gap-16">
    <n-progress
      class="flex-1"
      :class="{ gradient, 'filter-bg': appStore.isDeep }"
      v-bind="{
        type: 'line',
        indicatorPlacement: 'inside',
        railColor: appStore.isDeep ? '#FFFFFF1A' : '#E7EAF0',
        height: 10,
        ...attrs,
      }"
    >
      <div class="inner">{{ attrs.percentage }}%</div>
    </n-progress>
    <div class="flex-shrink-0 text-14 font-500" :style="{ color: attrs.color }">
      {{ text }}
    </div>
  </div>
</template>
<script setup lang="jsx">
import { useAppStore } from '@/store'

defineOptions({
  name: 'MyProgress',
})
const appStore = useAppStore()
const props = defineProps({
  text: {
    type: String,
    default: null,
  },
  gradient: {
    type: Array,
    default: null,
  },
})
const attrs = useAttrs()
const startColor = computed(() => (props.gradient?.length ? props.gradient[0] : '#FFF'))
const endColor = computed(() => (props.gradient?.length ? props.gradient[1] : '#FFF'))
const borderWidth = computed(() => (appStore.isDeep ? '1px' : '3px'))
</script>
<style lang="scss" scoped>
.MyProgress {
  --move-border-width: v-bind('borderWidth');
  :deep(.n-progress) {
    .n-progress-graph-line-rail {
      overflow: visible !important;
      padding-right: calc(30px + var(--move-border-width) * 2);
    }
    .n-progress-graph-line-indicator {
      position: relative;
      border-radius: 5px;
      margin-left: 0 !important;
    }
    &.gradient {
      .n-progress-graph-line-indicator {
        background: linear-gradient(
          to right,
          v-bind('startColor') 0,
          v-bind('endColor') 100%
        ) !important;
      }
    }
    &.filter-bg {
      .n-progress-graph-line-fill {
        &::before {
          content: '';
          display: block;
          position: absolute;
          background: linear-gradient(
            to right,
            v-bind('startColor') 0,
            v-bind('endColor') 100%
          ) !important;
          top: 0;
          left: 0;
          z-index: -1;
          filter: blur(8px);
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    width: 50px;
    height: 20px;
    background: v-bind('attrs.color');
    border-radius: 20px;
    border: var(--move-border-width) solid #ffffff;
    position: absolute;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    right: calc(-50px - var(--move-border-width));
    font-size: 14px;
    filter: none;
  }
}
</style>
